// Color

@import '../../style/themes/default';
@import '../../style/mixins/index';
@import './param';

@mixin color {
  display: block;
  color: var(--x-white);
  &-primary {
    padding: 1rem;
    border-top-left-radius: 0.125rem;
    border-top-right-radius: 0.125rem;
  }
  &-only {
    border-bottom-left-radius: 0.125rem;
    border-bottom-right-radius: 0.125rem;
  }
  &-hex {
    margin-top: 0.25rem;
    display: block;
    font-size: 0.75rem;
    opacity: 0.7;
  }
  &-gradual {
    display: flex;
  }
  &-item {
    flex: 1;
    height: 2.5rem;
    &:first-child {
      border-bottom-left-radius: 0.125rem;
    }
    &:last-child {
      border-bottom-right-radius: 0.125rem;
    }
  }
}
